<template>
  <div class="movie-detail" v-if="movieData">
    <header>
      <h1>{{ movieData.title }}</h1>
      <div class="header">
        <div class="header-left">
          <p class="header-left-rating">
            <img class="star" v-for="item in starArr[0]" src="./star-active.png" alt="" /><img class="star" v-for="item in starArr[1]" src="./star.png" alt="" />  
            <span>{{ movieData.rating.average }}</span>
            <span style="color: #aaaaaa">{{ movieData.collect_count }}人评价</span>
          </p>
          <p class="header-left-info">
            <span v-for="item in movieData.genres" :key="item">{{ item }} / </span>
            <span v-for="item in movieData.directors" :key="item.id">{{ item.name }}(导演) / </span>
            <span v-for="item in movieData.casts" :key="item.id">{{ item.name }} / </span>
          </p>
        </div>
        <div class="header-right">
          <img :src="movieData.images.small" alt="" />
        </div>
      </div>
    </header>
    <section class="subject-mark">
      <button>想看</button>
      <button>看过</button>
    </section>
    <section class="channel-tag section-block">
      <h2>所属频道</h2>
      <p>
        <span v-for="item in movieData.genres" :key="item">{{ item }} > </span>
      </p>
    </section>
    <section class="subject-intro section-block">
      <h2>{{ movieData.title }}的剧情简介</h2>
      <p>
        {{ movieData.summary }}
      </p>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      movieData: null, // 电影数据
      starArr: [] // 星星
    }
  },
  created () {},
  mounted () {},
  activated () {
    console.log('----------------电影详情')
    console.log(this.$store.state.recommended.activeMovie)
    this.movieData = this.$store.state.recommended.activeMovie
    this.getStarArr()
  },
  methods: {
    // 设置星星
    getStarArr () {
      // 清空原有数组
      this.starArr.splice(0, this.starArr.length)
      // 重新赋值
      let num = this.movieData.rating.average ? Math.ceil(Math.ceil(Number(this.movieData.rating.average)) / 2) : 0
      this.starArr.push(num)
      this.starArr.push(5 - num)
    }
  }
}
</script>

<style lang="less">
.movie-detail {
  padding: 0 15px;
  header {
    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: normal;
    }
    .header {
      display: flex;
      justify-content: space-between;
      margin: 10px 0 0 0;
      .header-left {
        padding-right: 15px;
        .header-left-rating {
          margin: 0;
        }
        .header-left-info {
          font-size: 14px;
          line-height: 18px;
        }
      }
      .header-right {
        img {
          width: 110px;
          height: 160px;
        }
      }
    }
  }
  .subject-mark {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    button {
      width: 48%;
      padding: 5px 0;
      border: 1px solid #ffb712;
      color: #ffb712;
      background-color: #ffffff;
      border-radius: 6px;
    }
  }
  .section-block {
    margin-top: 35px;
  }
  .channel-tag {
    h2 {
      font-weight: normal;
      font-size: 15px;
      color: #aaaaaa;
    }
    span {
      padding: 5px 12px;
      border: 1px solid #42bd56;
      font-size: 14px;
      color: #42bd56;
      background-color: #effaf0;
      border-radius: 15px;
    }
    span + span {
      margin-left: 5px;
    }
  }
  .subject-intro {
    h2 {
      margin: 0;
      font-weight: normal;
      font-size: 15px;
      color: #aaaaaa;
    }
    p {
      line-height: 24px;
    }
  }
  .star {
    width: 14px;
    height: 14px;
  }
}
</style>
